import { Component } from 'react';
import './App.less';

import { Button, Table, Tag, Space,  Modal, Input   } from 'antd';

import Hello from './components/Hello';

export default class App extends Component {

  state = {
    list : [
      {name: "bao", age: 18, address: "余杭" },
      {name: "jun", age: 12, address: "西湖" },
      {name: "超", age: 11, address: "西湖" },
      {name: "a", age: 13, address: "滨江" },
    ],
    isModalVisible: false,
    isUpdate: false,
    name: "",
    age: null,
    address: "",
    index: null,
  }

  addUser = (dataType, index) => {
    
      
      if(dataType == "add") {
        console.log("添加 操作", dataType);
        // console.log("===", this.inputName)  //  为什么是 undefined
        if(this.inputAddress) {
          this.inputName.value = ""
          this.inputAddress.value = ""
          this.inputAge.value = ""
        }
        this.setState({
          isModalVisible: !this.state.isModalVisible,
          isUpdate: false,
        })
      } else {

        const {list, isUpdate, age, name, address} = this.state
        console.log("更新操作====", index, list[index])
        if(this.inputAddress) {
          this.inputAddress.value = list[index].address
          this.inputAge.value = list[index].age
          this.inputName.value = list[index].name
        }

        let newList = list.filter((f, i) => {
          return index == i
        })
       
        console.log("newList:", newList)

        this.setState({
          isModalVisible: !this.state.isModalVisible,
          age: list[index].age,
          name: list[index].name,
          address: list[index].address,
          isUpdate: true,
          index
        })
      }
  }

  deleteItem = (i) => {  //  删除 按钮
    const {list} = this.state
    this.setState({
      list: list.filter((f, index) => {
        return index !== i
      })
    })
  }

  handleOk = (dataType) => {   // 确定 按钮
    const {name, age, address, list, isUpdate, index} = this.state
    let newList = JSON.parse(JSON.stringify(list))
    // console.log("ok", name, age, address)
    if(!isUpdate) {
      console.log("添加 +++")
      newList.push({name, age, address})
      this.setState({
        isModalVisible: !this.state.isModalVisible,
        list: newList,
        name: "",
        age: "",
        address: ""
      })
    } else {
      console.log("---", this.inputName.value, this.inputAge.value, this.inputAddress.value)
      newList.splice(index, 1, {name: this.inputName.value, age: this.inputAge.value, address: this.inputAddress.value})
      this.setState({
        list: newList,
        isModalVisible: !this.state.isModalVisible,
      })
    }

  }
  handleCancel = () => {   //  取消 按钮 
    this.setState({
      isModalVisible: !this.state.isModalVisible
    })
  }

  handleFormData = (dataType, value) => {  //  双向绑定
    this.setState({
      [dataType]: value
    })
  }
  
  render() {
    const { list, isModalVisible } = this.state
    return (
      <div className='App'>
        <Button onClick={() => this.addUser("add")} type="primary">Add a row</Button>

        <Modal title="添加" visible={isModalVisible} onOk={() => {this.handleOk("add")}} onCancel={this.handleCancel}
               cancelText="取消" okText="确认">
          <div className='divMargin'> 
            <span className='name'> <i>*</i> Name:</span> 
            <input type="input" ref={(e) => this.inputName = e} onChange={(e) => this.handleFormData("name", e.target.value)} />
          </div>
          <div className='divMargin'> 
            <span className='name'>address:</span> 
            <input type="input"  ref={(e) => this.inputAddress = e} onChange={(e) => this.handleFormData("address", e.target.value)}  />
          </div>
          <div className='divMargin'> 
            <span className='name'>Age:</span> 
            <input type="input"  ref={(e) => this.inputAge = e} className='inputAge' onChange={(e) => this.handleFormData("age", e.target.value)} />
          </div>
     
        </Modal>


        <table>
          <thead>
            <tr>
              <th>name</th>
              <th>age</th>
              <th>address</th>
              <th>operation</th>
            </tr>
          </thead>
          <tbody>

            {
              list.map((item, index) => {
                return <tr key={index}>
                  <td>{item.name}</td>
                  <td>{item.age}</td>
                  <td>{item.address}</td>
                  <td>
                    <button onClick={() => {this.deleteItem(index)}}>Delete</button>
                    <button onClick={() => {this.addUser(null, index)}}>Update</button>
                  </td>
                </tr>
              })
            }

          </tbody>
        </table>


        
      </div>
    )
  }
}

